<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>汉字转全拼</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<!-- 第二步：引入jquery插件pinyin.js -->
	<script src="./js/pinyin.js"></script>
	<style>
		.text{  background-color: aliceblue; 
                padding: 10px; 
                width: 400px; 
                border: 1px solid #ccc; 
                height: 30px; margin: 10px;
                font-size: 20px;}
	</style>
</head>
<body>
<!-- 第一步：写入放中文和全拼以及简拼的三个input-->
<div style="margin: 10% auto; width: 550px;">
    <!-- 第四步：在chinaName中加一个失去焦点执行函数，去执行函数 -->
    输入名称：<input type="text" id="chinaName" class="text"  onBlur="ConvertName()" />  <br/>  
    全写拼音：<input type="text" id="fullName"  class="text" /> <br/> 
    简写拼音：<input type="text" id="easyName"  class="text" /> <br/> 
</div>  
<script>
    // 第三步：写一个中文转换全拼及简拼的函数
	 var ConvertName = function(){    
            var chinaName = $('#chinaName').val();    
            //获取全写拼音（调用js中方法）        
            var fullName = pinyin.getFullChars(chinaName);
            //获取简写拼音（调用js中方法）
            var easyName = pinyin.getCamelChars(chinaName);    
            //给两个文本框赋值    
            $('#fullName').val(fullName);
            $('#easyName').val(easyName);
       }
</script>
<body>
</html>